import { View, Image, Text, publishDps, ScrollView } from '@ray-js/ray';
import clsx from 'clsx';
import React, { useState } from 'react';
import res from '@/res/images';

import { BottomSheet, Icon } from '@ray-js/smart-ui';
import Strings from '@/i18n';
import { useProps } from '@ray-js/panel-sdk';
import Checkmark from '@tuya-miniapp/icons/dist/svg/Checkmark';
import useHandleJump from '@/hooks/useHandleJump';
import Styles from './index.module.less';
import { saveCloudData } from '@/api';
import { useDispatch } from 'react-redux';
import { updatetDelayTime } from '@/redux/modules/cloudStateSlice';

export function BotBar() {
  const { weather_delay: weatherDelay } = useProps();

  const handleJump = useHandleJump();
  const [show, setShow] = useState(false);

  const dispatch = useDispatch();

  const list = [
    {
      title: 'home',
      icon: res.home,
      active: true,
      onClick: () => null,
    },
    {
      title: 'delay',
      icon: res.countDown,

      onClick: () => {
        setShow(true);
      },
    },
    {
      title: 'schedule',
      icon: res.schedule,

      onClick: () => {
        handleJump('timerList');
      },
    },
    {
      title: 'setting',
      icon: res.setting,

      onClick: () => {
        handleJump('setting');
      },
    },
  ];

  const onClose = () => {
    setShow(false);
  };

  const options = ['24h', '48h', '72h', 'cancel'];
  return (
    <View className={clsx(Styles.wrapper)}>
      {list.map(item => {
        const isActive = item.active;

        return (
          <View key={item.title} className={clsx(Styles.itembox)} onClick={item.onClick}>
            <View className={clsx(Styles.item)}>
              <Image src={item.icon} className={clsx(Styles.icon)} />
            </View>
            <Text className={clsx(Styles.title, isActive && Styles['item-active'])}>
              {Strings.getLang(item.title)}
            </Text>
          </View>
        );
      })}

      <BottomSheet
        show={show}
        slot={{
          title: (
            <View
             className={Styles.titleBox}
            >
              <View className={Styles.title1}>{Strings.getLang('delaySetting')}</View>
              <View className={Styles.subTitle}>{Strings.getLang('delaySettingSub')}</View>
            </View>
          ),
        }}
        onClose={onClose}
      >
        <ScrollView scrollY className={Styles.bottomSheetScrollView}>
          {options.map(item => {
            const isSelected = weatherDelay === item;
            return (
              <View
                key={item}
                onClick={() => {
                  publishDps({
                    weather_delay: item,
                  });
                  onClose();
                  saveCloudData({
                    code: 'delayTime',
                    value: new Date().getTime(),
                  });
                  dispatch(updatetDelayTime(new Date().getTime()));
                }}
                className={Styles.option}
              >
                <Text>{item !== 'cancel' ? item : Strings.getLang('cancelDelay')}</Text>
                {isSelected ? (
                  <Icon
                    name={Checkmark}
                    color="#0083FE"
                    size="42rpx"
                    customClass={Styles.checkmark}
                  />
                ) : null}
              </View>
            );
          })}
        </ScrollView>
      </BottomSheet>
    </View>
  );
}
